<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 100px;
            margin: auto;
            border-collapse: collapse
        }

        th {
            border: 1px solid;
        }

        td {
            border: 1px solid;
        }

        tr {
            border: 1px solid;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script>
        let thead = document.querySelector('thead');
        let tbody = document.querySelector('tbody');
        fn()
       function set(name,value){
        let num =[];
        let sum = []
           for(var i = 0; i<value.length;i++){
               console.log(value[i].number)
            if(value[i].number == 2){
                num.push(value[i])
                console.log('num==>',num)
                document.cookie=JSON.stringify(num);
           }else{
               sum.push(value[i]);
               console.log('sum',sum)
                localStorage.setItem(name,JSON.stringify(sum))
           }
        console.log(value.length)
           }
       }
       function get(name){
          return JSON.parse(localStorage.getItem(name)) 
       }
       
       function fn(){
        let arr = [
           {    
               number:1,
               name:'胡歌',
               gender:'男'
           },
           {
            number:2,
               name:'洋洋',
               gender:'男'
           },
           {
            number:1,
               name:'迪丽热',
               gender:'女'
           },
           {
            number:2,
               name:'米米',
               gender:'女'
           },
       ]
            set('name',arr);
            let value = get('name') 
                console.log(value)
            console.log(arr.length)
            for (var i = 0; i < value.length; i++) {
                let tr = document.createElement('tr');
                tbody.appendChild(tr);
                let td = document.createElement('td');
                td.textContent = value[i].name;
                tr.appendChild(td);
                let nTd = document.createElement('td');
                nTd.textContent = value[i].gender;
                tr.appendChild(nTd);
            }
        }
    </script>
</body>

</html>